<template>
	<view class="container">
		<view class="header">
			<view class="header-title">个人信息</view>
			<view class="header-wrapper">
				<view class="user-avatar">
					<img v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl">
					<view class="user-title"
						:class="{advanced: userInfo.userType === 2, middle: userInfo.userType === 1}">
						{{ userInfo.userTitle }}
					</view>
				</view>
				<view class="user-name">
					{{ userInfo.name }}
				</view>
			</view>
		</view>

		<view class="card">
			<ul>
				<!-- 头像 -->
				<!-- <li class="user-avatar">
					<text>头像</text>
					<view class="avatar" ref="fileInput">
						<img v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</view>
				</li> -->

				<!-- 用户名 -->
				<li id="account">
					<text>账号</text>
					<view class="user-name">
						<span>{{ userInfo.account }}</span>
					</view>
				</li>

				<!-- 电话 -->
				<li id="tel" @click="pageJump('modifyTel')">
					<text>手机号</text>
					<view class="user-tel">
						<span>{{ userInfo.tel }}</span>
						<i class="fa fa-angle-right" style="color: #666; font-size: 24px;"></i>
					</view>
				</li>

				<!-- 密码 -->
				<li id="password" @click="pageJump('modifyPwd')">
					<text>密码</text>
					<view class="user-pwd">
						<span>******</span>
						<i class="fa fa-angle-right" style="color: #666; font-size: 24px;"></i>
					</view>
				</li>
			</ul>
		</view>
	</view>

	<!-- 抽屉 -->
	<el-drawer :title="drawerLabel" :before-close="cancelForm" :visible.sync="drawer" direction="btt" v-model="drawer"
		custom-class="demo-drawer" ref="drawer" size="100%">
		<div class="demo-drawer__content">
			<el-form>
				<el-form-item v-if="modifyPassword" :label-width="formLabelWidth" label="新密码">
					<el-input v-model="currInput" autocomplete="off" style="height: 36px;"></el-input>
				</el-form-item>

				<el-form-item v-if="modifyPassword" :label-width="formLabelWidth" label="确认密码">
					<el-input v-model="confirmPassword" autocomplete="off" style="height: 36px;"></el-input>
				</el-form-item>

				<el-form-item v-else :label-width="formLabelWidth" label="新号码">
					<el-input v-model="currInput" autocomplete="off" style="height: 48px;"></el-input>
				</el-form-item>

				<el-form-item :label-width="formLabelWidth" label="验证码">
					<el-input v-model="verifyCode" autocomplete="off" style="height: 48px;"></el-input>
				</el-form-item>
			</el-form>
			<div class="demo-drawer__footer">
				<el-button custom-class="confirm-button"
					style="border: none; color:#FFF; background-color: #BD3124; margin: 20px 50%; transform: translateX(-50%);"
					type="primary" @click="handleConfirm">确定</el-button>
			</div>
		</div>
	</el-drawer>
</template>

<script>
	import request from '@/utils/http.js';

	export default {
		data() {
			return {
				userInfo: {
					account: 'uuid_abcd_123456',
					name: '测试员工',
					tel: '13278885835',
					userType: 2,
					userTitle: '高级管理员',
					avatarUrl: '/static/default_avatar.png'
				},

				drawer: false,
				drawerLabel: '',
				currInput: '',
				currItem: '',
				verifyCode: '',
				modifyPassword: false,
				confirmPassword: '',
				formLabelWidth: '80px',
			};
		},
		onLoad() {
			this.getUserInfo();
			// 辅助功能：触发头像文件上传
			// this.$nextTick(() => {
			// 	const _self = this;
			// 	const input = document.createElement('input'); //创建元素
			// 	const avatar = document.querySelector('.avatar');
			// 	input.type = 'file'; //添加file类型
			// 	input.style.display = "none";
			// 	input.onchange = (event) => {
			// 		_self.selectFile(input, event);
			// 	};
			// 	this.$refs.fileInput.$el.appendChild(input);
			// 	avatar.onclick = () => {
			// 		input.click();
			// 	};
			// });
		},

		methods: {
			getUserInfo() {
				const storedUserInfo = uni.getStorageSync('userInfo');
				if (storedUserInfo) {
					this.userInfo = JSON.parse(storedUserInfo);
				}
			},

			selectFile(input, event) {
				const file = input.files[0];
				const reader = new FileReader();
				reader.onload = (e) => {
					// 读取完成，更新头像
					const url = e.target.result;
					this.uploadFile(url);
				};
				reader.readAsDataURL(file); // 将文件数据读取为 DataURL（base64编码）
			},

			uploadFile(file) {
				// console.log("上传文件：", file);
				request({
					url: "/api/user/update",
					header: {
						"Content-Type": "image/png"
					},
					data: file
				}).then(res => {
					console.log(res);
				})
			},

			pageJump(target) {
				uni.navigateTo({
					url: `/pages/my/modifyInfo/${target}`
				});
			},

			handleDrawer(event) {
				this.drawer = true;
				const parentElement = event.currentTarget; // currTarget获取的是父元素，target获取具体元素
				this.currItem = parentElement.id;

				if (this.currItem === 'password') {
					this.modifyPassword = true;
				}
				// this.currInput = this.modifyPassword ? '' : this.userInfo[this.currItem];
				const label = parentElement.querySelector('span').innerText;
				this.drawerLabel = `修改${label}`;
			},

			handleConfirm(done) {
				if (!this.currInput.trim() || this.userInfo[this.currItem] === this.currInput) {
					this.$message.warning('请修改后提交');
					return;
				}

				this.userInfo[this.currItem] = this.currInput;
				console.log(this.userInfo);

				this.$message.success('修改成功！');
				setTimeout(() => {
					this.modifyPassword = false;
					this.formLabelWidth = '0';
					this.currInput = '';
					this.drawer = false;
				}, 1000);
			},

			cancelForm() {
				this.modifyPassword = false;
				this.currInput = '';
				this.drawer = false;
			},

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		background-color: #F5F5F5;
	}

	.header {
		position: absolute;
		top: 0;
		z-index: 1;
		width: 100%;
		height: 254px;
		// background-color: #BD3124;
		background-image: linear-gradient(#BD3124, #BD3124, #BD3124, #BD3124, #BD3124, #BD3124, #F5F5F5); // 渐变
		// padding: 0 30rpx 10rpx;
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
	}

	.header-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		margin-top: 20px;
		width: 100%;
		height: 180px;
	}

	.user-avatar {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 4px;
	}

	img {
		display: block;
		width: 100px;
		height: 100px;
		border-radius: 50px;
		object-fit: cover;
	}

	.user-title {
		width: 80px;
		height: 28px;
		border-radius: 8px;
		text-align: center;
		line-height: 28px;
		font-size: 12px;
		color: #F5F5F5;
		background-color: #666;
		text-shadow: none;
	}

	.advanced {
		background-image: linear-gradient(to bottom right, #F4CE98, #FFFBC7, #FBB03B, #EDD181, #FFFBC7); // 渐变
		color: #A16222;
		font-style: italic;
		font-weight: 500;
	}

	.middle {
		background-color: rgb(154, 154, 154, 0.9);
		background-image: linear-gradient(to bottom right, #f5f5f5, #777, #555, #333333, #eeeeee);
		font-style: italic;
		font-weight: 500;
		color: #F5F5F5;
	}

	.card {
		position: absolute;
		top: 27%;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;
		padding: 8px 16px;
		width: 85%;
		min-height: 70px;
		border-radius: 8px;
		background-color: #FFF;
		// box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
	}

	ul {
		list-style: none;
		margin: 0;
		padding: 0 0 0 8px;
	}

	li {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 56px;
	}

	span {
		margin-right: 20px;
		color: #666;
	}
</style>